<template>
    <div class='mySelect'>
        <u--textarea placeholder="请选择" :value="(list.filter(item => modelValue.split(',').includes(''+item.value))).map(item => item.label).toString()" :disabled="disabled" suffixIcon="arrow-down" readonly @click.native="showTpye">
            <u-icon slot="suffix" name="arrow-down"></u-icon>
            <u-icon slot="prefix" v-show="value[labelName]&&!disabled&&clearabled&&type!=='checkbox'" name="close-circle" @click.stop.native="clear"></u-icon>
        </u--textarea>
        <u-popup :show="checkboxShow" @close="checkboxShow=false" :round="10" closeOnClickOverlay>
						<u-search placeholder="搜索医院名称" v-model="keyword" :showAction="false" shape="round" @search="searchFun"></u-search>
            <div class="checkbox">
                <u-checkbox-group size='27' borderBottom iconSize='18' iconPlacement='right' v-model="checkedList" placement="column">
                    <u-checkbox :customStyle="{marginBottom: '8px'}" :checked="checkedList.some(e=>e[labelName]==item[labelName])" v-for="(item, index) in list" :key="index" :label="item[labelName]" :name="item"></u-checkbox>
                </u-checkbox-group>
                <div class="btnList">
                    <u-button class="btn" type="primary" color="#909399" text="清空选择" @click="checkedList=[]"></u-button>
                    <u-button type="primary" color="#0ab99c" text="确定" @click="checkboxConfirm"></u-button>
                </div>
            </div>
        </u-popup>
    </div>
</template>
<script>
export default {
    name: 'mySelect',
		model: {
			prop: "modelValue",
			event: "input",
		},
    props: {
			modelValue: String | Array | Object | Boolean | Number,
			disabled: {//是否禁用
					type: Boolean,
					default: false
			},
			scanAbled: {//是否能够扫码
					type: Boolean,
					default: false
			},
			clearabled: {//是否可以清空
					type: Boolean,
					default: false
			},
			getFirst: {//是否得到数据后自动选取第一条
					type: Boolean,
					default: false
			},
			placeholder: {//占位文字
					type: String,
					default: ''
			},
			apiName: {//获取搜索框数据或者验证扫码的方法名
					type: String,
					default: ''
			},
			labelName: {//展示的值对应字段名
					type: String,
					default: 'label'
			},
			valueName: {//唯一值对应字段名
					type: String,
					default: 'value'
			},
			titleName: {//额外值值对应字段名
					type: String,
					default: ''
			},
			type: {//action:操作菜单 picker:滚动选择框 checkbox:多选 search:搜索选择框 scan:扫码验证框
					type: String,
					default: 'action'
			},
			list: {//选项数组
					type: Array,
					default: () => []
			},
			value: {//对应item
					type: Object,
					default: () => { return {} }
			},
			otherData: {//接口需要的其他数据
					type: Object,
					default: () => { return {} }
			},
    },
    data() {
        return {
						keyword: '',
            actionShow: false,
            pickerShow: false,
            checkboxShow: false,
            searchShow: false,
            scanShow: false,
            checkedList: [],//已选择列表
						checkedListAll: [],
            scanValue: '',
        }
    },
    methods: {
				searchFun() {
					this.checkedList = this.checkedListAll.filter(item => item.labelName == this.keyword)
					console.log('发送多个32', this.checkedList)
				},
        showTpye() {
							this.checkedList = []
							this.checkedListAll = []
                this.list.forEach((item) => {
									if (this.modelValue.split(',').includes(''+item.value)) {
										this.checkedList.push(item)
										this.checkedListAll.push(item)
									}
								})
						this.checkboxShow = true
        },
        clear() {
            let item = { ...this.value }
            for (const key in item) {
                this.$set(item, key, this.type == 'checkbox' ? [] : '');
            }
            this.$emit("input", item);
            this.$emit("clear");
            this.$emit("confirm", item);
        },
        checkboxConfirm() {
            // this.value[this.labelName] = this.checkedList.map(e => e[this.labelName])
            // this.value[this.valueName] = this.checkedList.map(e => e[this.valueName])
            this.checkboxShow = false
						// console.log('this.checkedList', (this.checkedList.map(item => item.value)).toString())
            this.$emit("input", (this.checkedList.map(item => item.value)).toString());
            this.$emit("confirm", this.checkedList);
        }
    },
    mounted() {
    }
}
</script>
<style lang='scss' scoped>
.mySelect {
    width: 100%;
    .input {
        display: flex;
    }
    .checkbox {
        padding: 15rpx;
        /deep/.u-checkbox-group {
            max-height: 50vh;
            overflow: scroll;
        }
        .btnList {
            display: flex;
            .btn {
                margin-right: 5rpx;
            }
        }
    }
    .scan {
        padding: 15rpx;
        .btnList {
            margin-top: 5px;
        }
    }
}
</style>